<template>
	<view>
		<view class="bg-white">
			<view class="item row-between">
				<view class="title" style="padding-top: 0;">
					杂费总支出
				</view>
				<view>
					<u-input :inputAlign="inputAlign" v-model="total_amount" placeholder="金额" :type="type" :border="border" />
				</view>
			</view>
		</view>
		
        <view class="bg-white mt20">
			<view class="title pl20 " >
				杂费支出
			</view>
			<block v-for="(item,index) in zafei_arr" :key="index">
				<view class="row-between item">
								<view class="row-center">
									<text class="required-color mr10">*</text>
									<u-input inputAlign="left" v-model="item.spending" placeholder="名称" type="text" :border="border" />
								</view>
								<view class="row-center">
									<u-input :inputAlign="inputAlign" v-model="item.actual_amount" placeholder="金额" :type="type" :border="border" />
									<view class="delete" @click="zafei_arr.splice(index,1)">
										删除
									</view>
								</view>
				</view>
				<u-line color="#F6F6F6" />
			</block>	
		  
		   <view class="add" @click="addzafei">
		     	<u-icon name="plus-circle" color="#2C48F2" size="32"></u-icon><text>其他杂费</text>
		   </view>
		</view>
		
          <!-- 提交按钮 -->
          <view class="submit-btn white" @click="verificationData">
          	<view class="submit-btn-content row-center">
          		提交
          	</view>
          </view>

	</view>
</template>
<script>
export default {
	data() {
		return {
			border: false,
			inputAlign: 'right',
			type: 'number',
			total_amount:"",
		    zafei_arr:[
				{
					"spending":"劳保费",
					"actual_amount":"",
				},
				{
					"spending":"维修费",
					"actual_amount":"",
				},
				{
					"spending":"奖品费",
					"actual_amount":"",
				}
			]    
		};
	},
	onLoad() {
		this.baseurl = this.$u.http.config.baseUrl;
		this.userinfo = uni.getStorageSync('userinfo');
	},
	computed: {},
	methods: {
		
		addzafei(){
			let _this = this;
			_this.zafei_arr.push({"spending":"","actual_amount":""});
		},
			isNull(value) {
				if(value == '' || value == 0 || value == undefined) {
					return false;
				}
				return true;
			},
			verificationData(){
				let _this = this;
				let {
					total_amount,
					zafei_arr
				} = _this;
				
			     if(!_this.isNull(total_amount)){
			     	uni.showToast({
			     		title: '总支出必填',
			     		icon: "none"
			     	})
			     	return false;
			     }
				 
				 for (let elem of zafei_arr) {
					    if(!_this.isNull(elem.spending) ){
							uni.showToast({
								title: '名称必填',
								icon: "none"
							})
							return false;
						}
						if(!_this.isNull(elem.actual_amount)){
							uni.showToast({
								title: '金额必填',
								icon: "none"
							})
							return false;
						}
			  	}
							
				this.$u.post('/api/finance/foodIndirectAdd', {other:zafei_arr,total_amount}).then(res => {
					this.$u.toast('成功');
				}).catch(res=>{
					
				});
				
			}
			
	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F7F7;
	}
.title{
	padding-top: 34rpx;
	font-weight: bold;
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		width: 6rpx;
		height: 26rpx;
		background-color: #2045FC;
		left: 0;
		 margin: 6rpx auto 0;
	}
}
.item{
	padding: 20rpx 30rpx;
	.delete{
		border: 2rpx solid #E89C38;
		border-radius: 4rpx;
		padding: 5rpx 10rpx;
		margin-left:60rpx;
		color:#E89C38;
	}
}
.add{
	display: flex;
	justify-content: center;
	height: 100rpx;
	flex-direction: row;
	align-items: center;
	margin: 0 40%;
	color:#2045FC ;
	cursor: pointer;
}


.submit-btn {
			margin:155rpx 30rpx 0;
			.submit-btn-content {
				width: 100%;
				padding: 20rpx;
				background-color: #2C48F2;
				border-radius: 50rpx;
			}
		}
</style>
